<template>
  <div class="order">
    <div class="my_order">
      <p class="my">我的订单</p>
      <p class="look"><a href="####">查看全部订单<span class="jt">></span></a></p>
    </div>
    <!--付款-->
    <div class="payment">
      <dl>
        <dt><img src="../../../static/img/icon5.png"></dt>
        <dd><a href="###">待付款</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/icon6.png"></dt>
        <dd><a href="###">待发货</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/icon7.png"></dt>
        <dd><a href="###">待收货</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/icon8.png"></dt>
        <dd><a href="###">待评价</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/icon9.png"></dt>
        <dd><a href="###">售后</a></dd>
      </dl>
    </div>
    <!--====拼团====-->
    <div class="tuan">
      <dl>
        <dt><img src="../../../static/img/pic6.png"></dt>
        <dd><a href="###">我的拼团</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/pic7.png"></dt>
        <dd><a href="###">我的钱包</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/pic8.png"></dt>
        <dd><a href="###">优惠券</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/pic9.png"></dt>
        <dd><a href="###">分期商城</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/pic10.png"></dt>
        <dd><a href="###">会员中心</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/pic11.png"></dt>
        <dd><a href="###">魔豆商城</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/pic12.png"></dt>
        <dd><a href="###">分享夺宝</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/pic13.png"></dt>
        <dd><a href="###">充值中心</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/pic14.png"></dt>
        <dd><a href="###">客服与帮助</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/pic15.png"></dt>
        <dd><a href="###">意见反馈</a></dd>
      </dl>
      <dl>
        <dt><img src="../../../static/img/pic16.png"></dt>
        <dd><a href="###">生活助手</a></dd>
      </dl>
    </div>

  </div>
</template>
<script type="text/ecmascript-6">

    export default {
        components: {
        }
    }

</script>
<style scoped>
  /*======订单=====*/
  .order{
    background:#efefef;
  }
  .my_order{
    background:#fff;
    padding:0.1rem 0.1rem;
    display:flex;
    justify-content:space-between ;
    border-bottom: 1px solid #e7e7e7;

  }
  .my{
    font-size:18px;
    color:#848684;
  }
  .look{
    font-size:16px;

  }
  .look a{
    color:#848684;
  }
  .jt{
    padding-left:0.1rem;

  }
  /*========付款=====*/
  .payment{
    background:#fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.15rem;
  }
  .payment dl{
    width:20%;
    padding-top:0.15rem;
  }
  .payment dt{
    width:0.36rem;
    height:0.36rem;
    margin:0 auto;
  }
  .payment dt img{
    width:100%;
    height:100%;
    display:block;
  }
  .payment dd{
    font-size:16px;
    text-align: center;
    padding-top:0.1rem;
  }
  .payment dd a{
    color:#333;
  }
  /*=====拼团===*/
  .tuan{
    background:#fff;
    display: flex;
    /*justify-content: space-between;*/
    margin-bottom: 0.15rem;
    flex-wrap: wrap;
  }
  .tuan dl{
    width:25%;
    padding-top:0.17rem;
  }
  .tuan dt{
    width:0.36rem;
    height:0.36rem;
    margin:0 auto;
  }
  .tuan dt img{
    width:100%;
    height:100%;
    display:block;
  }
  .tuan dd{
    font-size:16px;
    text-align: center;
    padding-top:0.1rem;
  }
  .tuan dd a{
    color:#333;
  }
</style>
